<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/echarts.min.js"></script>
</head>

<body>
  <div style="width:600px;height:400px;border:1px solid #ff0000;"></div>
</body>
<script>
  let dom = document.querySelector("div")
  let myChart = echarts.init(dom)

  let option = {
    label: {
      show: true,
      position: "top"
    },
    xAxis: {
      type: "category",     //类目轴
      data: ["张三", "李四", "王五", "赵六"],   //类目轴显示的内容
      //刻度与标签对齐
      axisTick: {
        alignWithLabel: true
      }
    },
    legend: {},      //图例
    yAxis: {
      type: "value",        //数值轴
    },
    series: [

      {
        name: "2021",
        type: "bar",        //柱状图
        data: [100, 160, 200, 120],   //柱状图的数据
        barWidth: 10,
        // label:{
        //   show:true,
        //   position:"top"
        // }
      },
      {
        name: "2022",
        type: "bar",        //柱状图
        data: [60, 120, 160, 80],   //柱状图的数据
        barWidth: 10,
        // label:{
        //   show:true,
        //   position:"top"
        // }
      },

    ],

  }

  myChart.setOption(option)
</script>

</html>